<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

    <div id="components-demo">
        <button-contuer></button-contuer>
        <button-contuer></button-contuer>
        <button-contuer></button-contuer>
    </div>

    <div id="app4">
        <blog-post title="My journey with Vue"></blog-post>
        <blog-post title="Blogging with Vue"></blog-post>
        <blog-post title="Why Vue is so fun"></blog-post>
    </div>

    <div id="blog-posts-events-demo">
        <div :style="{ fontSize: postFontSize + 'em' }">
        <blog-post
        v-for="post in posts"
        v-bind:key="post.id"
        v-bind:post="post"
        ></blog-post>
        </div>
    </div>

    <div id="app5">
        <button v-on:click="$emit('enlarge-text')"></button>
    </div>
    <div>
        <button v-on:click="$emit('enlarge-text',0.1)"></button>
    </div>

    <div id="app6">
        <custom-input
            v-bind:value="searchTText"
            v-on:input="searchText = $event"
        ></custom-input>
    </div>
    
</body>
<script src="./vue.js"></script>
<script src="main.js"></script>
</html>